<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="online_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },
  mounted () {
    this.initChart();
    this.isReady = true
    this.getData();
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.online_ref);
    },
    //获取服务器数据 后续接口获取数据方法处
    getData () {
      let chartData = this.dashboardData.onlineWeekTime
      let xData = []
      let yData = []
      chartData.map((item) => {
        xData.push(item.time)
        if (item.dormitory != null) {
          yData.push(item.dormitory)
        } else if (item.college != null) {
          yData.push(item.college)
        } else {
          yData.push(item.major + item.grade)
        }

      })
      this.updataChart(xData, yData);
    },
    //更新图表
    updataChart (xData, yData) {
      var num = xData;
      const option = {
        title: {
          textStyle: {
            fontSize: 18,
            color: "rgba(255, 255, 255, 1)"
          },
          text: "一周平均上网人数(总)",
          padding: [2, 2, 2, 2]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 60,
          left: "20%",
          bottom: "28%"
        },
        xAxis: {
          name: "时间/天",
          type: "category",
          axisLine: {
            show: true,
            lineStyle: { color: "rgb(116, 215, 226)", width: "2" },
          },
          axisLabel: { show: true, color: "rgb(116, 215, 226)" },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          },
          axisTick: { show: false },
          splitLine: { show: false },
          data: ["1", "2", "3", "4", "5", "6", "7"],
          nameTextStyle: {
            verticalAlign: "top",
            padding: [20, 0, 0, -50],
            // borderRadius: [4, 4, 4, 4],
            // borderWidth: 2.5,
            // borderColor: "rgba(204, 9, 9, 1)",
            color: "rgba(255, 255, 255, 1)",
          }
        },
        yAxis: {
          name: "人数/个",
          type: "value",
          interval: 100,
          position: "top",
          nameTextStyle: {

            color: "rgba(255, 255, 255, 1)",
          },
          axisLine: {
            show: true,
            lineStyle: { color: "rgb(116, 215, 226)", width: "2" },
          },
          axisLabel: { show: true, color: "rgb(116, 215, 226)" },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        visualMap: {
          bottom: 0,
          left: "40%",
          itemSymbol: 'roundRect',
          itemWidth: 25,
          itemHeight: 10,
          align: "left",
          inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
          },
          pieces: [{
            lte: 500,
            symbol: 'roundRect',
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 1,
                color: "#dbfb79",
              },
              {
                offset: 0,
                color: "#001e3b ",
              },
            ])
          }, {
            gt: 500,
            symbol: 'roundRect',
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 1,
                color: "#50feff",
              },
              {
                offset: 0,
                color: "#0a2e3f",
              },
            ])
          }],
          itemGap: 0,
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12
          }
        },
        series: [
          {
            name: "数据",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              formatter: "{b}",
            },
            data: num.map((item) => {
              return {
                value: item,
                itemStyle: {
                  normal: {
                    barBorderRadius: [33, 33, 0, 0],

                  },
                },
              };
            }),
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
        }

      }
    }
  }
};
</script>

<style>
</style>